$primary-theme-color: #6363af !default;
$primary-background-color: #f6f6fa !default;
$primary-font-size: 14px !default;
$primary-text-color: #333 !default;

html {
    font-family: "Microsoft YaHei UI", "Microsoft YaHei", Ubuntu, Consolas, Verdana, Tahoma, Arial, sans-serif;
    font-size: $primary-font-size;
}

body {
    background-color: $primary-background-color;
    color: $primary-text-color;
}

.fd-categories-icon {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2216%22%20height=%2216%22%20fill=%22rgba%28255,255,255,0.55%29%22%20viewBox=%220%200%2016%2016%22%3E%3Cpath%20d=%22M1%202.5A1.5%201.5%200%200%201%202.5%201h3A1.5%201.5%200%200%201%207%202.5v3A1.5%201.5%200%200%201%205.5%207h-3A1.5%201.5%200%200%201%201%205.5v-3zM2.5%202a.5.5%200%200%200-.5.5v3a.5.5%200%200%200%20.5.5h3a.5.5%200%200%200%20.5-.5v-3a.5.5%200%200%200-.5-.5h-3zm6.5.5A1.5%201.5%200%200%201%2010.5%201h3A1.5%201.5%200%200%201%2015%202.5v3A1.5%201.5%200%200%201%2013.5%207h-3A1.5%201.5%200%200%201%209%205.5v-3zm1.5-.5a.5.5%200%200%200-.5.5v3a.5.5%200%200%200%20.5.5h3a.5.5%200%200%200%20.5-.5v-3a.5.5%200%200%200-.5-.5h-3zM1%2010.5A1.5%201.5%200%200%201%202.5%209h3A1.5%201.5%200%200%201%207%2010.5v3A1.5%201.5%200%200%201%205.5%2015h-3A1.5%201.5%200%200%201%201%2013.5v-3zm1.5-.5a.5.5%200%200%200-.5.5v3a.5.5%200%200%200%20.5.5h3a.5.5%200%200%200%20.5-.5v-3a.5.5%200%200%200-.5-.5h-3zm6.5.5A1.5%201.5%200%200%201%2010.5%209h3a1.5%201.5%200%200%201%201.5%201.5v3a1.5%201.5%200%200%201-1.5%201.5h-3A1.5%201.5%200%200%201%209%2013.5v-3zm1.5-.5a.5.5%200%200%200-.5.5v3a.5.5%200%200%200%20.5.5h3a.5.5%200%200%200%20.5-.5v-3a.5.5%200%200%200-.5-.5h-3z%22/%3E%3C/svg%3E");
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}

.fd-navbar {
    background-color: $primary-theme-color;
}

.fd-navbar-categories {
    display: flex;
    flex-wrap: wrap;
    color: #336;
    padding: 0 0.5rem;

    > * {
        padding:0.2rem 1rem;
        margin: 0.2rem 0.2rem;
        /* border: #f6f6fa 1px solid; */
        border-radius: 0.3rem;
        background-color: #b4b4da;
    }
    a {
        color: #336;
    }
}
.fd-navbar-categories-title {
    padding:0 0.8rem;
    color: #f6f6fa;
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
}
.fd-nav-search {
    width: auto;
    input {
        color: #666699;
        background-color: #fff;
    }
    button {
        color: #336;
        background-color: #fff;
        border: 1px solid #ced4da;
        border-left: none;
    }
}
.fd-nav-item {
    /* list-style-type: square; */
}
.fd-nav-ul {
    /* background-color: #333; */
}

.fd-footer {
    /* background-color: #fff; */
    /* color: #FFF; */
    padding: 2.5rem;
    ul {
        margin-bottom: 0;
    }

    background-color: #fff;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.08);
}

.fd-banner {
    background-color: #fff;
    color: #666699;
    overflow: hidden;
    ul {
        height: 2.5rem;
        padding-left: 0;
        margin: 0;
        list-style-type: none;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        li {
            margin-right: 2.5rem;
            white-space: nowrap;
            a {
                color: #666699;
                &:hover {
                    color: darken(#666699,10%);
                }
            }
        }
    }
}

.fd-banner-animation {
    animation: 20s banner linear infinite normal;
    display: inline-block;
    /* background-color: #b4b4da; */
    &:hover {
        animation-play-state: paused;
    }
}
@keyframes banner {
    from {
        transform: translateX(5%);
    }
    to {
        transform: translateX(-100%);
    }
}

@media (min-width: 992px) {
    .fd-left {
        width: 228px;
    }
}

.fd-categories-box {
    background-color: #fff;

    .fd-categories-item {
        > a {
            padding-right: 0.5rem;
            white-space: nowrap;
            &:last-child {
                padding-right: 0;
            }
        }
    }
}

@media (min-width: 1200px) {
    .fd-right {
        width: 300px;
    }
}


.fd-box {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;


    .fd-box-title {
        border-bottom: 1px solid #efefef;
        padding-bottom: 0.5rem;
    }

    .fd-article-title {
        margin-bottom: 0.5rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 1.1rem;
    }

    .fd-article-text {
        color: #666;
        &:last-child {
            margin-bottom: 0;
        }
    }

    .fd-article-list {
        margin-top: 1rem;
        margin-bottom: 0;
        list-style-type: none;
        padding-left: 0;
        li {
            margin-top: 0.25rem;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .title {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                a {
                    color: #333;
                    &:hover {
                        color: darken($color: #337ab7, $amount: 10%);//rgb(41,98,146);
                    }
                }
            }

            .date {
                flex-shrink: 0;
                color: #999;
                font-size: 0.85em;
            }

            // 小圆点
            padding-left: 1rem;
            &:before{
                position: absolute;
                display: block;
                content: '';
                width: 5px;
                height: 5px;
                background-color: #ccc;
                border-radius: 50%;
                left: 0;
            }
        }
    }
}

.fd-box-recommended {
    @extend .fd-box;
    .fd-article-list {
        li {
            &:before {
                background-color: lighten(#67B168, 10%);
            }
        }
    }
}

.fd-box-newest {
    @extend .fd-box;
    .fd-article-list {
        li {
            &:before {
                background-color: lighten(#F0AD4E, 10%);
            }
        }
    }
}

.fd-box-hotest {
    @extend .fd-box;
    .fd-article-list {
        li {
            &:before {
                background-color: lighten(#D9534F, 10%);
            }
        }
    }
}

a.fd-link {
    // color: #111;
    font-weight: bold;

    &:hover {
        // color: rgb(41,98,146);
        font-weight: bold;
    }
}
